<template>
  <div id="index"
    class="home_index">
    <div class="home_content">
      <div class="cur_store_status">
        <h3>{{dataObj.platformName || '--'}}</h3>
        <div :class="['cur_store_status_txt',dataObj.platformState == '1'? 'store_business': '' ]">
          {{dataObj.platformState == '1'? '营业中':dataObj.platformState == '2'? '即将打烊': dataObj.platformState == '0'? '试用中': '打烊' }}
        </div>

        <el-form label-width="80px"
          inline>
          <el-form-item label="日期"
            style="margin: 0">
            <el-date-picker v-model="dateRange"
              type="daterange"
              align="right"
              size="small"
              style="width: 250px"
              value-format="yyyy-MM-dd"
              unlink-panels
              :clearable="false"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleQueryData">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="renew_fee_notice"
        v-if="dataObj.platformState == '-1'">
        <div class="renew_fee_icon"><i class="el-icon-warning"></i></div>
        <div class="renew_fee_desc">您的店铺试用期已结束，如需恢复经营，请联系商务代表(电话微信同号:13723467352)订购。</div>
        <!--
        <el-button type="danger" style="background-color: #DD4545;margin: 0" size="small">立即续费 ></el-button>
		-->
      </div>
      <div class="renew_fee_notice"
        v-if="dataObj.platformState == '0'">
        <div class="renew_fee_icon"><i class="el-icon-warning"></i></div>
        <div class="renew_fee_desc">您的店铺试用期即将结束，如需正常经营，请联系商务代表(电话微信同号:13723467352)订购。</div>
        <!--
        <el-button type="danger" style="background-color: #DD4545;margin: 0" size="small">立即续费 ></el-button>
		-->
      </div>
      <div class="renew_fee_notice"
        v-if="dataObj.platformState == '2'">
        <div class="renew_fee_icon"><i class="el-icon-warning"></i></div>
        <div class="renew_fee_desc">您的店铺使用日期即将结束，如需正常经营，请联系商务代表(电话微信同号:13723467352)订购。</div>
        <!--
        <el-button type="danger" style="background-color: #DD4545;margin: 0" size="small">立即续费 ></el-button>
		-->
      </div>
      <div class="real_time_box"
        :style="{'margin-top': dataObj.platformState == '1'? '20px': '10px'}">
        <div class="big_title_style cur_title">实时概况</div>
        <div class="show_real_data">
          <div class="item_rows item_data_rows">
            <div class="item_real_data">
              <span class="item_real_data_num">￥{{dataObj.totalMoney}}</span>
              <div class="item_real_data_desc">
                收款总额
              </div>
            </div>
            <div class="item_real_data">
              <span class="item_real_data_num">{{dataObj.vipAmount}}</span>
              <div class="item_real_data_desc">
                储值金额
              </div>
            </div>
            <div class="item_real_data">
              <span class="item_real_data_num">{{dataObj.adminGoodAmount}}</span>
              <div class="item_real_data_desc">后台收款</div>
            </div>
            <div class="item_real_data">
              <span class="item_real_data_num">{{dataObj.scanAmount}}</span>
              <div class="item_real_data_desc">扫码兑换</div>
            </div>
          </div>
          <div class="item_rows item_data_rows">
            <div class="item_real_data">
              <span class="item_real_data_num">{{dataObj.totalJifen}}</span>
              <div class="item_real_data_desc">总积分</div>
            </div>
            <div class="item_real_data">
              <span class="item_real_data_num">￥{{dataObj.jifen}}</span>
              <div class="item_real_data_desc">
                新增积分
              </div>
            </div>
            <div class="item_real_data">
              <span class="item_real_data_num">{{dataObj.useJifen}}</span>
              <div class="item_real_data_desc">消耗积分</div>
            </div>
            <div class="item_real_data">
              <span class="item_real_data_num">{{dataObj.memberCount}}</span>
              <div class="item_real_data_desc">会员总数</div>
            </div>
          </div>
          <div class="item_rows item_data_rows">
            <div class="item_real_data">
              <span class="item_real_data_num">￥{{dataObj.download}}</span>
              <div class="item_real_data_desc">
                下载数量
              </div>
            </div>
            <div class="item_real_data">
              <span class="item_real_data_num">{{dataObj.maiduan}}</span>
              <div class="item_real_data_desc">买断数量</div>
            </div>
            <div class="item_real_data">
              <span class="item_real_data_num">{{dataObj.collect}}</span>
              <div class="item_real_data_desc">收藏数量</div>
            </div>
            <div class="item_real_data">
              <span class="item_real_data_num">{{dataObj.registers}}</span>
              <div class="item_real_data_desc">注册数量</div>
            </div>
          </div>
        </div>
      </div>

      <div class="real_time_box">
        <div class="big_title_style cur_title">快捷入口</div>
        <div class="quikly_in">

          <div class="item_in"
            @click="toJumpOth('1')">
            <div class="item_in_icon">
              <img style="width: 100%;height: 100%"
                src="../assets/images/home_icon_3.png"
                alt="">
            </div>
            <span>论文资料</span>
          </div>
          <div class="item_in"
            @click="toJumpOth('2')">
            <div class="item_in_icon">
              <img style="width: 100%;height: 100%"
                src="../assets/images/home_icon_4.png"
                alt="">
            </div>
            <span>订单查询</span>
          </div>
          <div class="item_in"
            @click="toJumpOth('3')">
            <div class="item_in_icon">
              <img style="width: 100%;height: 100%"
                src="../assets/images/home_icon_1.png"
                alt="">
            </div>
            <span>储值查询</span>
          </div>
          <div class="item_in"
            @click="toJumpOth('4')">
            <div class="item_in_icon">
              <img style="width: 100%;height: 100%"
                src="../assets/images/home_icon_5.png"
                alt="">
            </div>
            <span>客户查询</span>
          </div>
          <div class="item_in"
            @click="toJumpOth('5')">
            <div class="item_in_icon">
              <img style="width: 100%;height: 100%"
                src="../assets/images/home_icon_2.png"
                alt="">
            </div>
            <span>业务模块</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { getHomeData, homeAnnouncementList, homeDataShow, monthTargetData } from "@/api/home.js";
import {
  selectGroup
} from "@/api/platform/store"

export default {
  components: {

  },
  data () {
    return {
      tipTxt1: '今日交易额=当日所有已支付的订单总额，包含售后单',
      tipTxt2: '今日订单数=当日所有已支付的订单总数，包含售后单',
      tipTxt3: '今日客单价=当日所有已支付的订单金额/支付用户数',
      dataObj: {},
      mesList: [],
      queryParams: {
        storeId: null,
        startTime: null,
        endTime: null
      },
      storeIds: [],
      storeList: [],
      dateRange: [],
      homeData: {},
      monthTarget: {}
    }
  },
  created () {
    // this.getData()
    this.getHomeDataShow()
    /*
    this.getMsgList()
    selectGroup().then(response => {
      this.storeList = response.data || [];
    });*/

    let curDate = new Date()
    let y = curDate.getFullYear()
    let m = curDate.getMonth() + 1
    let d = curDate.getDate()
    let dateStr = `${y}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d}`
    this.dateRange = [dateStr, dateStr]
    this.queryParams.startTime = dateStr
    this.queryParams.endTime = dateStr

    //this.getMonthTargetData()
  },
  methods: {
    getMonthTargetData () {
      let storeId = null
      if (this.storeIds.length > 0) {
        storeId = this.storeIds.join(',')
      }

      monthTargetData({
        storeId
      }).then(res => {
        this.monthTarget = res.data
      })
    },
    getHomeDataShow () {
      if (this.dateRange.length > 0) {
        this.queryParams.startTime = this.dateRange[0]
        this.queryParams.endTime = this.dateRange[1]
      } else {
        this.queryParams.startTime = null
        this.queryParams.endTime = null
      }

      if (this.storeIds.length > 0) {
        this.queryParams.storeId = this.storeIds.join(',')
      } else {
        this.queryParams.storeId = null
      }

      homeDataShow(this.queryParams).then(res => {
        this.dataObj = res.data
      })
    },
    handleQueryData () {
      this.getHomeDataShow()
      this.getMonthTargetData()
    },
    toJumpCust () {
      this.$router.push({
        path: '/customer/Info'
      })
    },
    toJumpOrder () {
      this.$router.push({
        path: '/order/info'
      })
    },
    toJumpMsg (uid) {
      this.$router.push("/cms/notice/detail/" + uid);
    },
    toJumpOth (type) {
      if (type == '1') {
        this.$router.push({
          path: '/product/info'
        })
      } else if (type == '2') {
        this.$router.push({
          path: '/order/info'
        })
      } else if (type == '3') {
        this.$router.push({
          path: '/order/recharge'
        })
      } else if (type == '4') {
        this.$router.push({
          path: '/customer/Info'
        })
      } else if (type == '5') {
        this.$router.push({
          path: '/cms/notice'
        })
      }
    },
    toJumpWarnPro () {
      this.$router.push({
        path: '/product/warning'
      })
    },
    toJumpWaitPay () {
      this.$router.push({
        path: '/order/info',
        query: {
          activeClass: '1'
        }
      })
    },
    toJumpSend () {
      this.$router.push({
        path: '/order/deliverCenter'
      })
    },
    toJumpAfter () {
      this.$router.push({
        path: '/order/sale'
      })
    },
    getData () {
      getHomeData().then(res => {
        if (res.code == 200) {
          this.dataObj = res.data
        } else {
          this.msgError(res.msg);
        }
      })
        .catch(() => {
          this.msgError("数据错误");
        })
    },
    getMsgList () {
      homeAnnouncementList(10).then(res => {
        if (res.code == 200) {
          this.mesList = res.data
        } else {
          this.msgError(res.msg);
        }
      })
        .catch(() => {
          this.msgError("数据错误");
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.home_index {
  padding: 20px;
  display: flex;
  .cur_title {
    font-size: 16px;
    padding: 20px;
    border-bottom: 1px solid #eee;
    position: relative;
    .to_more {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 20px;
      font-size: 14px;
      color: #666;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
.home_content {
  flex: 1;
  height: auto;
  .cur_store_status {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    h3 {
      font-size: 16px;
      color: #333;
      font-weight: normal;
    }
    .cur_store_status_txt {
      border: 1px solid #dd4545;
      border-radius: 4px;
      padding: 1px 5px;
      margin-left: 10px;
      font-size: 12px;
      color: #dd4545;
    }
    .store_business {
      color: #00cc66;
      border-color: #00cc66;
    }
    .cur_store_status_desc {
      font-size: 14px;
      color: #666;
      margin-left: 10px;
    }
  }
  .renew_fee_notice {
    background-color: rgb(255, 221, 221);
    padding: 25px 20px 15px;
    display: flex;
    align-items: center;
    border-radius: 10px;
    position: relative;
    top: -10px;
    .renew_fee_icon {
      font-size: 16px;
      color: #dd4545;
    }
    .renew_fee_desc {
      font-size: 12px;
      color: #dd4545;
      line-height: 24px;
      margin: 0 30px 0 10px;
    }
  }
  .real_time_box {
    margin-top: 20px;
    background-color: #fff;
    border-radius: 10px;
    width: 100%;
    height: auto;
    .show_real_data {
      width: 100%;
      .item_rows {
        width: 100%;
        display: flex;
        height: 120px;
        &:not(:last-child) {
          border-bottom: 1px solid #eee;
        }
        .item_real_data {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 0 20px;
          &:hover {
            cursor: pointer;
          }
          .item_real_data_num {
            font-size: 24px;
            color: #333;
            margin-bottom: 15px;
          }
          .item_real_data_desc {
            font-size: 12px;
            color: #333;
            display: flex;
            align-items: center;
          }
          .item_real_data_title {
            font-size: 14px;
            color: #333;
            margin-bottom: 15px;
          }
          .item_real_data_order_num {
            font-size: 12px;
            color: #666;
            line-height: 1;
            b {
              font-weight: normal;
              font-size: 24px;
              color: #333;
            }
          }
        }
        .item_target_data {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;
          color: #333;
          margin-bottom: 15px;
          .item_target_data_show {
            font-weight: bold;
          }
        }
      }
      .item_data_rows {
        .item_real_data {
          &:not(:nth-child(3n)) {
            border-right: 1px solid #eee;
          }
        }
      }
      .item_order_rows {
        .item_real_data {
          &:not(:nth-child(4n)) {
            border-right: 1px solid #eee;
          }
        }
      }
    }
    .quikly_in {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 30px 0;
      .item_in {
        display: flex;
        flex-direction: column;
        align-items: center;
        &:hover {
          cursor: pointer;
        }
        .item_in_icon {
          width: 45px;
          height: 45px;
          margin-bottom: 10px;
        }
        span {
          font-size: 14px;
          color: #666;
        }
      }
    }
  }
}
.aside_content {
  width: 320px;
  margin-left: 30px;
  .platform_msg {
    background-color: #fff;
    border-radius: 10px;
    .msg_list {
      padding: 20px;
      min-height: 200px;
      .item_msg {
        display: flex;
        align-items: center;
        justify-content: space-between;
        &:not(:last-child) {
          margin-bottom: 20px;
        }
        .item_msg_title {
          flex: 1;
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: left;
        }
        .item_msg_time {
          color: #666;
          font-size: 12px;
          margin-left: 15px;
        }
        .new_msg_show {
          padding: 0 2px;
          color: #fff;
          background-color: #dd4545;
          border-radius: 3px;
        }
      }
    }
  }
  .help_center {
    background-color: #fff;
    border-radius: 10px;
    margin-top: 20px;
    .help_list {
      padding: 20px;
      min-height: 200px;
      .item_help {
        &:not(:last-child) {
          margin-bottom: 20px;
        }
        .item_help_title {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
